<template>
  <div class="employees-container">
    <div class="app-container">
      <!-- 通用工具栏组件使用 -->
      <page-tools>
        <!-- 自定义左侧内容 -->
        <template #slot-left>
          <span>共19条记录</span>
        </template>

        <!-- 自定义右侧内容 -->
        <template #slot-right>
          <el-button type="danger" size="small" @click="uploadExcelBtnFn">导入excel</el-button>
          <el-button type="success" size="small" @click="downloadExcel">导出excel</el-button>
          <el-button type="primary" size="small" @click="addEmployeesFn">新增员工</el-button>
        </template>
      </page-tools>

      <!-- 表格+分页 -->
      <el-card style="margin-top: 10px;">
        <el-table border :data="employeesList">
          <el-table-column label="序号" type="index" />
          <el-table-column label="姓名" prop="username" />
          <el-table-column label="头像" prop="staffPhoto" />
          <el-table-column label="手机号" prop="mobile" />
          <el-table-column label="工号" prop="workNumber" sortable :sort-method="sortMethodFn" />
          <el-table-column label="聘用形式" prop="formOfEmployment">
            <template v-slot="scope">
              <!-- scope.row.formOfEmployment ? '正式' : '非正式'
                ?左边是1/2 或者字符串'1', '2' 都是true, 原地值始终是'正式' 与我们要的效果不符合
                但是
                scope.row.formOfEmployment === 1 ? '正式' : '非正式'
                ?左边是一个判断===的条件, 整体判断结果在原地作为三元运算符判断条件
                1===1  true  2===1 false (现在效果对的)
               -->
              <!-- <span>{{ scope.row.formOfEmployment === 1 ? '正式' : '非正式' }}</span> -->
              <span>{{ formatFormOfEmploymentFn(scope.row.formOfEmployment) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="聘用形式" prop="formOfEmployment" :formatter="formatFormFn" />
          <el-table-column label="部门" prop="departmentName" />
          <el-table-column label="入职时间" prop="timeOfEntry" />
          <el-table-column label="操作" width="280">
            <template v-slot="scope">
              <el-button type="text" size="small" @click="$router.push(`/employees/detail?id=${scope.row.id}`)">查看</el-button>
              <el-button type="text" size="small">分配角色</el-button>
              <el-button type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-row type="flex" justify="center" align="middle" style="height: 60px">
          <!-- 分页区域 -->
          <el-pagination
            :current-page="query.page"
            :page-sizes="[10, 15, 20, 25]"
            :page-size="query.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-row>
      </el-card>

      <!-- 新增员工-弹窗+表单 -->
      <el-dialog title="新增员工" :visible.sync="showDialog" @close="closeDialogFn">
        <emp-form
          ref="empForm"
          :show-dialog.sync="showDialog"
          :depart-list="departList"
          @enterEV="addFn"
        />
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getEmployeeListAPI, departmentsListAPI, addEmployee } from '@/api'
// 树形结构的转换方法
import { transTree } from '@/utils'
import Employees from '@/api/constant/employees.js'
import EmpForm from './components/empForm.vue'
export default {
  name: 'Employees',
  components: {
    EmpForm
  },
  data() {
    return {
      query: {
        page: 1, // 页码
        size: 10 // 每页条数
      },
      employeesList: [], // 员工列表
      departList: [], // 部门列表
      total: 0, // 数据总条数
      showDialog: false // 新增员工-弹窗显示/隐藏
    }
  },
  created() {
    // 获取员工列表数据
    // 因为一会儿做分页, 我们还得发送请求, 直接调用getEmployeesListFn()
    // 注意: 生命周期方法, 没有挂载到this组件对象身上, this.created()是错误的
    this.getEmployeesListFn()
    // 获取部门列表数据
    this.getDepartmentsListFn()
  },
  methods: {
    // 请求-员工列表数据
    async getEmployeesListFn() {
      const res = await getEmployeeListAPI(this.query)
      // console.log(res)
      this.employeesList = res.data.rows
      this.total = res.data.total
      // 如何把所有的数据都参与到排序?
      // 思路1: 让后台写. 你需要给后台发送排序的字段(升序还是降序, 要哪一页多少条), 后台有所有数据, 把所有数据进行排序, 你要第几页多少条, 返回第几段往后的条数的数据
      // 思路2: 前端写, 你需要pageSize改很大, 把所有数据请求回来(前提)
      // 分页分段, 排序, 都自己在此函数中拿到数据后, 自己排序, 根据页码和条数, 自己分段取值返回给el-table
      // 数组截取的方法slice()
    },
    // 请求-部门列表数据
    async getDepartmentsListFn() {
      const res = await departmentsListAPI()
      this.departList = transTree(res.data.depts, '') // 指定一级部门的pid值
    },
    // 每页显示的条数发生改变时触发
    handleSizeChange(newSize) {
      this.query.size = newSize
      this.getEmployeesListFn()
    },
    // 当前页面发生改变时触发
    handleCurrentChange(newPage) {
      this.query.page = newPage
      this.getEmployeesListFn()
    },
    // 格式化聘用形式的数字转文字
    formatFormOfEmploymentFn(num) {
      const obj = {
        1: '正式',
        2: '非正式'
        // 将来有3, 4 , 5就按照这种对应的格式来写
      }
      // 知识点: 对象.具体的key名  (key必须已经在对应里了, obj.1 obj.2)
      // 对象[变量]
      return obj[num]
    },
    // 格式化聘用形式的数字转文字方式2
    formatFormFn(row) {
      const obj = Employees.hireType.find(item => item.id === row.formOfEmployment)
      return obj ? obj.value : '未知'
    },
    // 自己实现-工号列的排序
    sortMethodFn(a, b) {
      // a和b是数组里相邻的2个值(数据对象)
      // 这里和数组的sort方法使用一致
      // https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
      return a.workNumber - b.workNumber // 字符串相减,会自动转换成数字, 返回数字
    },
    // 新增员工-"按钮"-点击事件
    addEmployeesFn() {
      this.showDialog = true
    },
    async addFn(data) {
      await addEmployee(data)
      this.getEmployeesListFn() // 刷新列表数据
    },
    closeDialogFn() {
      // 2.重置表单
      this.$refs.empForm.$refs.addForm.resetFields()
    },
    // 点击导入表格
    uploadExcelBtnFn() {
      this.$router.push('/excel')
    },
    // 点击导出表格
    downloadExcel() {
      const headerArr = ['序号', '姓名', '头像', '手机号', '工号', '聘用形式', '部门', '入职时间', '1', '2']
      // const valueArr = this.employeesList.map(item => {
      //   return Object.values(item)
      // })
      console.log(valueArr)
      const keyObj = {
        '序号': 'id',
        '姓名': 'username',
        '头像': 'staffPhoto',
        '手机号': 'mobile',
        '工号': 'workNumber',
        '聘用形式': 'formOfEmployment',
        '部门': 'departmentName',
        '入职时间': 'timeOfEntry'
      }
      //  headerArr 拿出中文,换出英文
      const valueArr = this.employeesList.map((obj, index) => {
        const newArr = []
        headerArr.forEach(znKey => {
          const enKey = keyObj[znKey]
          // 表格里序号和聘用形式转换 还有默认部分,所以分三种情况 分别来写
          if (enKey === 'id') {
            newArr.push(index + 1)
          } else if (enKey === 'formOfEmployment') {
            const obj2 = Employees.hireType.find(item => item.id === obj[enKey])
            newArr.push(obj2 ? obj2.value : '未知')
          } else {
            const value = obj[enKey] // 取值
            newArr.push(value)
          }
        })
        return newArr
      })
      import('@/vendor/Export2Excel').then(excel => {
        // excel表示导入的模块对象
        excel.export_json_to_excel({
          header: headerArr, // 表头 必填
          // data: [
          //   ['刘备', 100],
          //   ['关羽', 500]
          // ], // 具体数据 必填
          data: valueArr,
          filename: '人资员工', // 文件名称
          autoWidth: true, // 宽度是否自适应
          bookType: 'xlsx' // 生成的文件类型
        })
      })
    }
  }

}
</script>

<style lang="scss" scoped></style>
